<template>
  <div class="stats-card-section">
    <div class="stats-cards">
      <!-- 销售额卡片 -->
      <div class="stats-card">
        <div class="card-icon sales-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">今日销售额 (元)</div>
          <div class="card-value">{{ formatCurrency(stats.salesAmount.value) }}</div>
          <div class="card-change" :class="stats.salesAmount.changeType">
            <span class="compare-text">较昨日</span>
            <el-icon v-if="stats.salesAmount.changeType === 'increase'"><Top /></el-icon>
            <el-icon v-else><Bottom /></el-icon>
            {{ Math.abs(stats.salesAmount.change).toFixed(2) }}%
          </div>
        </div>
      </div>
      
      <!-- 订单数量卡片 -->
      <div class="stats-card">
        <div class="card-icon orders-icon">
          <el-icon><Tickets /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">今日销售单数 (份)</div>
          <div class="card-value">{{ stats.orderCount.value }}</div>
          <div class="card-change" :class="stats.orderCount.changeType">
            <span class="compare-text">较昨日</span>
            <el-icon v-if="stats.orderCount.changeType === 'increase'"><Top /></el-icon>
            <el-icon v-else><Bottom /></el-icon>
            {{ Math.abs(stats.orderCount.change).toFixed(2) }}%
          </div>
        </div>
      </div>
      
      <!-- 利润卡片 -->
      <div class="stats-card">
        <div class="card-icon profit-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">今日销售利润 (元)</div>
          <div class="card-value">{{ formatCurrency(stats.profit.value) }}</div>
          <div class="card-change" :class="stats.profit.changeType">
            <span class="compare-text">较昨日</span>
            <el-icon v-if="stats.profit.changeType === 'increase'"><Top /></el-icon>
            <el-icon v-else><Bottom /></el-icon>
            {{ Math.abs(stats.profit.change).toFixed(2) }}%
          </div>
        </div>
      </div>
      
      <!-- 收款卡片 -->
      <div class="stats-card">
        <div class="card-icon payment-icon">
          <el-icon><CreditCard /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-title">今日收款 (元)</div>
          <div class="card-value">{{ formatCurrency(stats.receivedPayment.value) }}</div>
          <div class="card-change" :class="stats.receivedPayment.changeType">
            <span class="compare-text">较昨日</span>
            <el-icon v-if="stats.receivedPayment.changeType === 'increase'"><Top /></el-icon>
            <el-icon v-else><Bottom /></el-icon>
            {{ Math.abs(stats.receivedPayment.change).toFixed(2) }}%
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { TrendCharts, Tickets, Money, CreditCard, Top, Bottom } from '@element-plus/icons-vue'

interface StatItem {
  value: number
  change: number
  changeType: 'increase' | 'decrease'
}

interface StatsData {
  salesAmount: StatItem
  orderCount: StatItem
  profit: StatItem
  receivedPayment: StatItem
}

export default defineComponent({
  name: 'StatsCardSection',
  components: {
    TrendCharts,
    Tickets,
    Money,
    CreditCard,
    Top,
    Bottom
  },
  props: {
    stats: {
      type: Object as PropType<StatsData>,
      required: true
    },
    timeUnit: {
      type: String as PropType<'day' | 'month' | 'quarter'>,
      default: 'day'
    }
  },
  emits: ['time-unit-change'],
  setup(props, { emit }) {
    const formatCurrency = (value: number) => {
      return new Intl.NumberFormat('zh-CN', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      }).format(value)
    }
    
    return {
      formatCurrency
    }
  }
})
</script>

<style scoped lang="scss">
.stats-card-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  
  .stats-cards {
    display: flex;
    gap: 20px;
    
    @media (max-width: 1024px) {
      flex-wrap: wrap;
    }
    
    .stats-card {
      flex: 1;
      min-width: 200px;
      display: flex;
      align-items: center;
      padding: 15px;
      border-radius: 8px;
      background-color: #f8f9fa;
      transition: transform 0.2s;
      
      @media (max-width: 1024px) {
        flex: 0 0 calc(50% - 10px);
      }
      
      @media (max-width: 640px) {
        flex: 0 0 100%;
      }
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        margin-right: 15px;
        color: white;
        
        i {
          font-size: 20px;
        }
        
        &.sales-icon {
          background-color: #409eff;
        }
        
        &.orders-icon {
          background-color: #67c23a;
        }
        
        &.profit-icon {
          background-color: #e6a23c;
        }
        
        &.payment-icon {
          background-color: #f56c6c;
        }
      }
      
      .card-content {
        flex: 1;
        
        .card-title {
          color: #909399;
          font-size: 14px;
          margin-bottom: 5px;
        }
        
        .card-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .card-change {
          font-size: 12px;
          display: flex;
          align-items: center;
          gap: 5px;
          
          .compare-text {
            color: #909399;
          }
          
          &.increase {
            color: #67c23a;
          }
          
          &.decrease {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style> 